<template>
  <view class="wrapper" @tap.stop="navToDetail(info)">
    <view class="wrap-box">
      <view class="square-wrap">
        <view class="square-box">
          <image :src="info.thumb" mode="aspectFill" lazy-load></image>
        </view>
      </view>
      <view class="content">
        <view class="text-df text-333 text-cut-2">{{info.name}}</view>
        <view class="fu-cred margin-top-sm">
          <text>
            <text class="text-price text-bold text-sm"></text>
            <text class="text-lg text-bold margin-right-sm">{{info.shop_price}}</text>
          </text>
        </view>
        <view class="flex justify-between align-center text-sm text-999 margin-top-sm">
          <text class="text-price text-through">{{info.market_price}}</text>
          <text>月销量{{info.sales_sum}}件</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      info: {
        type: Object
      },
    },
    methods: {
      navToDetail(item) {
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail',
          params: {
            sku_id: item.sku_id || 0,
            goods_id: item.id,
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .wrapper {
    height: 570rpx;
    overflow: hidden;
    margin-top: 20rpx;
    padding: 0 10rpx;
    .wrap-box {
      background-color: #FFFFFF;
      border-radius: 24rpx;
      .square-wrap{
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        box-sizing: border-box;
        position: relative;
        .square-box{
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          border-radius: 24rpx 24rpx 0 0;
          image{
            width: 100%;
            height: 100%;
            border-radius: 24rpx 24rpx 0 0;
          }
        }
      }
    }
    .content {
      padding: 20rpx;
    }
  }
  .text-cut-2{
  	display: -webkit-box;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 2;
  	overflow: hidden;
  }
  .text-through{
    text-decoration: line-through;
  }
  .text-333{
    color: #333333;
  }
  .text-999{
    color: #999999;
  }
</style>
